<template>
  <div class="maps-container">
    <div id="main" style="width:100%; height:100%"></div>
  </div>
</template>

<script>
import echarts from "echarts";
// import obj from "echarts/map/json/china.json";
import obj from "echarts/map/json/province/yunnan.json";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.drawEchart();
  },
  methods: {
    getWidth() {
      let cw = document.documentElement.clientWidth;
      let ch = document.documentElement.clientHeight;
      let w = cw * 0.25 + "px";
      let h = ch * 0.5 + "px";
      document.getElementById("main").style.width = w;
      document.getElementById("main").style.height = h;
    },
    drawEchart() {
      this.getWidth();
      echarts.registerMap("yunnan", obj); // 注册一个地图，
      let myChart = echarts.init(document.getElementById("main"));
      var days = [
        "1863-1949",
        "1949-1959",
        "1959-1969",
        "1969-1979",
        "1979-1989",
        "1989-1999",
        "1999-2009",
        "2009-2019"
      ];
      var province = [
        "昆明市",
        "曲靖市",
        "玉溪市",
        "保山市",
        "昭通市",
        "丽江市",
        "普洱市",
        "临沧市",
        "楚雄州",
        "红河州",
        "文山州",
        "西双版纳州",
        "大理州",
        "德宏州",
        "怒江州",
        "迪庆州"
      ];

      var news = [
        "十年间各省市博物馆增长数据",
        "十年间各省市博物馆增长数据",
        "十年间各省市博物馆增长数据",
        "十年间各省市博物馆增长数据",
        "十年间各省市博物馆增长数据",
        "十年间各省市博物馆增长数据",
        "十年间各省市博物馆增长数据",
        "十年间各省市博物馆增长数据"
      ];
      var data = [
        [3, 2, 2, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6],
        [8, 2, 9, 4, 3, 0, 6, 6, 1, 10, 14, 10, 7, 7, 4, 5],
        [3, 0, 3, 6, 0, 4, 6, 0, 0, 3, 3, 4, 2, 9, 3, 2],
        [5, 0, 5, 7, 2, 5, 3, 3, 2, 3, 8, 5, 3, 14, 7, 10],
        [34, 7, 19, 46, 8, 16, 7, 13, 11, 47, 27, 25, 36, 48, 42, 45],
        [40, 7, 21, 11, 9, 17, 4, 24, 19, 44, 48, 18, 21, 12, 50, 19],
        [46, 28, 27, 28, 51, 27, 34, 62, 53, 78, 121, 53, 17, 11, 10],
        [22, 16, 48, 46, 92, 24, 38, 88, 34, 98, 163, 128, 33, 45, 364]
      ];

      let option = {
        baseOption: {
          timeline: {
            axisType: "category",
            // realtime: false,
            // loop: false,
            autoPlay: true,
            playInterval: 2000,
            symbolSize: 12,
            left: "5%",
            right: "5%",
            bottom: "0%",
            width: "90%",
            lineStyle: {
              color: "#fff"
            },
            label: {
              color: "#fff"
            },
            itemStyle: {
              color: "#00C8FF"
            },
            checkpointStyle: {
              color: "#fff"
            },
            controlStyle: {
              color: "#fff",
              borderColor: "#fff"
            },
            data: days,
            tooltip: {
              formatter: days
            }
          },

          tooltip: {
            show: true,
            formatter: function(params) {
              return params.name + "：" + params.data["value"];
            }
          },

          visualMap: {
            type: "piecewise" /* 分段类型 */,
            pieces: [
              {
                min: 251,
                max: 500,
                color: "#000826"
              },
              {
                min: 101,
                max: 250,
                color: "#002D81"
              },
              {
                min: 11,
                max: 100,
                color: "#00589A"
              },
              {
                min: 1,
                max: 10,
                color: "#0060E6"
              },
              {
                value: 0,
                color: "#00C8FF"
              }
            ],
            orient: "vertical",
            itemWidth: 25,
            itemHeight: 15,
            showLabel: true,
            seriesIndex: [0],

            textStyle: {
              color: "#7B93A7"
            },
            bottom: "10%",
            left: "5%"
          },

          grid: {
            right: "0",
            top: "5%",
            bottom: "10%",
            width: "20%"
          },
          xAxis: {
            min: 0,
            max: 4000,
            show: false
          },
          yAxis: [
            {
              inverse: true,
              nameGap:1,
              type: "category",
              data: "",           
              nameTextStyle: {
                color: "#fff"
              },
              
              axisTick: {
                show: false
              },
              axisLabel: {
                //rotate:45,
                textStyle: {
                  fontSize: 14,
                  color: "#00D2FF"
                },
                interval: 0
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#fff"
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          geo: {
            map: "yunnan",
            // right: "35%",
            // left: "20%",
            label: {
              emphasis: {
                show: false
              },
              normal: {
                show: false /* 显示省/市名称 */,
                textStyle: {
                  color: "#fff"
                }
              }
            },

            itemStyle: {
              emphasis: {
                areaColor: "#fff"
              }
            }
          },
          series: [
            {
              name: "mapSer",
              type: "map",
              map: "china",
              roam: false,
              geoIndex: 0,
              label: {
                show: false
              }
            },
            {
              name: "",
              type: "bar",
              zlevel: 2,
              barWidth: "40%",
              label: {
                normal: {
                  show: true,
                  fontSize: 14,
                  position: "right",
                  formatter: "{c}"
                }
              }
            }
          ]
        },
        animationDurationUpdate: 3000,
        animationEasingUpdate: "quinticInOut",
        options: []
      };
      for (var n = 0; n < days.length; n++) {
        var res = [];
        for (var j = 0; j < data[n].length; j++) {
          res.push({
            name: province[j],
            value: data[n][j]
          });
        }
        res
          .sort(function(a, b) {
            return b.value - a.value;
          })
          .slice(0, 6);

        res.sort(function(a, b) {
          return a.value - b.value;
        });
        var res1 = [];
        var res2 = [];
        for (var t = 0; t < 10; t++) {
          res1[t] = res[res.length - 1 - t].name;
          res2[t] = res[res.length - 1 - t].value;
        }
        console.log(res1);
        console.log("----------------");
        //   console.log(province);
        option.options.push({
          backgroundColor: "#154e90",
          title: [
            {
              text: days[n] + "年  " + news[n],
              textStyle: {
                color: "#fff",
                fontSize: 20
              },
              left: 10,
              top: 4
            }
            // {
            //   show: true,
            //   text: "十年内博物馆数量增长前十的省市",
            //   textStyle: {
            //     color: "#fff",
            //     fontSize: 18
            //   },
            //   right: "10%",
            //   top: "15%"
            // }
          ],
          yAxis: {
            data: res1,         
          },
          series: [
            {
              type: "map",
              data: res
            },
            {
              type: "bar",
              data: res2,
              label:{
                 offset:[30,0],
                 color:"#fff",
              } ,
              itemStyle: {
                color:"#fff",
                normal: {
                  color: function(params) {
                    // build a color map as your need.
                    var colorList = [
                      {
                        colorStops: [
                          {
                            offset: 0,
                            color: "#BD430A" // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#BD430A" // 100% 处的颜色
                          }
                        ]
                      },
                      {
                        colorStops: [
                          {
                            offset: 0,
                            color: "#BD430A" // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#BD430A" // 100% 处的颜色
                          }
                        ]
                      }
                    ];
                    if (params.dataIndex < 3) {
                      return colorList[0];
                    } else {
                      return colorList[1];
                    }
                  }
                }
              }
            }
          ]
        });
      }
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.maps-container {
  width: 100%;
  height: 100%;
  //   position: relative;
}
</style>
